<template>
  <div class="chat-wrapper">
    <div class="message-box">
      <div class="scrollArea" id="scrollRef" ref="scrollRef" >
        <div class="chatContentArea">
          <chatMessage
              v-for="(item, index) of activeItem.history"
              :date-time="item.dateTime"
              :text="item.text"
              :isMy="item.isMy"
          ></chatMessage>
        </div>
      </div>
    </div>
    <div class="input-box">
      <div class="clean" @click="delMessage">
        <img src="@/assets/images/clean.svg" alt="">
        清除历史
      </div>

      <div class="input">
        <el-input
            v-model="questionText"
            style="width: 100%"
            type="textarea"
            :autosize="{ minRows: 2,maxRows:2}"
            placeholder="请输入···"
            clearable
            resize="none"
        />
        <div class="send-img" @click="sendMessage">
          <img src="@/assets/images/send.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, ref,onMounted,defineExpose} from 'vue'
import chatMessage from "./chatMessage.vue"
import {getUuid,getTimeByHHMMSS,getTimeByHHMM} from "@/utils/util";
import {ElMessage} from "element-plus";
import {useScroll} from "../hooks/useScroll"

const { scrollRef, scrollToBottom } = useScroll();

const props = defineProps(['dataSource','activeChatId']);
const activeItem = computed(() => {
  return  props.dataSource.find(item => item.id === props.activeChatId);
});
const questionText = ref('');

onMounted(() => {
  scrollToBottom();
});

const scrollFn = ()=>{
  scrollToBottom();
};

const delMessage = () =>{
  activeItem.value.history=[]
};

const sendMessage=()=>{
  if(!questionText.value){
    ElMessage.error('您没有输入内容哦！')
    return
  }
  let historyList = activeItem.value.history
  let chatQuestionObj = {
    dateTime:getTimeByHHMMSS(),
    isMy:true,
    text:questionText.value
  }
  let html=`
    <div>
      <p>你好！我是你的专属AI伙伴，我拥有独特能力</p>
      <p>我非常希望你能给我持续的反馈，帮助我不断成长，期待你与我一起探索未来~</p>
    </div>
  `
  let chatAnswer={
    dateTime:getTimeByHHMMSS(),
    isMy:false,
    text:html,
  }

  historyList.push(chatQuestionObj)
  historyList.push(chatAnswer)

  questionText.value=''
  scrollToBottom();

}

// 使用 defineExpose 显式暴露子组件方法
defineExpose({
  scrollFn
})

</script>
<style scoped lang="less">
.chat-wrapper{
  padding: 30px 30px 20px;

  .message-box{
    height: 620px;
    //overflow-y: auto;
    min-height: 0;
    .scrollArea {
      overflow-y: auto;
      height: 100%;
    }
    .chatContentArea {
      padding: 10px;
    }
  }
  .input-box{
    .clean{
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 16px;
      color: #296DF1;
      cursor: pointer;
      >img{
        width: 30px;
      }
    }
  }

  .input{
    /deep/ .el-textarea__inner{
      box-shadow: none !important;
    }

    display: flex;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #296DF1;
    overflow: hidden;
  }
}


.send-img{
  width: 41px;
  height: 41px;
  border-radius: 50%;
  margin: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  background: #296DF1;
  cursor: pointer;
  >img{
    width: 29px;
    height: 29px;
  }
}
</style>